import React from 'react'

import './ListItem.scss'

class ListItem extends React.Component{ 
  renderComment(data){
    let evaluation = !data.is_comment
    if(evaluation){
      return (
        <div className='evaluation clearfix'>
          <div className="evaluation-btn">评价</div>
        </div>
      )
    }
    return null
  }
  renderTotalPrice(item, data, index){
    return(
      <div className='product-item' key={index}>
        <span>...</span>
        <div className='p-total-count'>
          总计{item.product_count}个菜, 实付
          <span className='total-price'>&yen;{data.total}</span>
        </div>
      </div>
    )
  }
  renderProduct(data){
    let lists = data.product_list
    lists.push({type: 'more'})
    return lists.map((item, index) => {
      if(item.type === 'more'){
        return this.renderTotalPrice(item, data, index)
      }
      return(
        <div className='product-item' key={index}>
          {item.product_name}
          <div className="p-count">x{item.product_count}</div>
        </div>
      )
    })
  }
  render(){
    let data = this.props.itemData

    return(
      <div className='order-item'>
        <div className="order-item-inner">
          <img className='item-img' src={data.poi_pic} alt=""/>
          <div className="item-right">
            <div className="item-top">
              <p className="order-name one-line">{data.poi_name}</p>
              <div className="arrow"></div>
              <div className="order-state">{data.status_description}</div>
            </div>
            <div className="item-bottom">
              {this.renderProduct(data)}
            </div>
          </div>
        </div>
        {this.renderComment(data)}
      </div>
    )
  }
}

export default ListItem